import React, {PureComponent} from 'react';
class HelloWorld extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      message: 'hello world'
    }
  }

  changeText() {
    this.setState({
      message: '你好啊，李银河'
    })
  }

  render() {
    const { message } = this.state
    return (
        <div>
          <h2>内容：{message}</h2>
          <button onClick={this.changeText.bind(this)}>修改文本</button>
        </div>
    )
  }
}

function HelloWorld2() {
  let message = "hello world"
  //以前函数式组件存在的最大缺陷：
  //1.组件不会被重新渲染：修改message之后，组件知道自己要重新渲染吗?
  //2.如果页面重新渲染：函数会被重新执行，第二次重新执行时，会重新给message赋值为hello world
  return (
      <div>
        <h2>内容2：{message}</h2>
        <button onClick={e => message = "你好啊，李银河"}>修改文本</button>
      </div>
  )
}

class App extends PureComponent {
  render() {
    return (
        <div>
          <h2>App</h2>
          <HelloWorld/>
          <HelloWorld2/>
        </div>
    );
  }
}

export default App;